<template>
    <div>
        <table class="table table-bordered">
            <tr>
                <td>名字</td>
                <td>
                    <input type="text" v-model="state.name">
                </td>
            </tr>

            <tr>
                <td>照片</td>
                <td>
                    <input type="file" @change="Images">
                    <img v-if="state.imgage != ''" :src="state.imgage" alt="" style="width: 100px; height: 100px;">
                </td>
            </tr>

            <tr>
                <td>电话号</td>
                <td>
                    <input type="text" v-model="state.phone">
                </td>
            </tr>

            <tr>
                <td>是否</td>
                <td>
                    <input type="radio" name="iseno" v-model="state.isNo" :value="1">男
                    <input type="radio" name="iseno" v-model="state.isNo" :value="0">女
                </td>
            </tr>


            <tr>
                <td></td>
                <td>
                    <input type="button" value="添加" @click="AddHouse">
                </td>
            </tr>
        </table>
    </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import axios from 'axios';

let router = useRouter();
let route = useRoute();

let data: any = reactive({
    state: {
        "name": "",
        "imgage": "",
        "phone": "",
        "isNo": 1,

    },
});

let { state } = toRefs(data);

const AddHouse = () => {

    let obj = {

        "name": state.value.name,
        "imgage": state.value.imgage,
        "phone": state.value.phone,
        "isNo": state.value.isNo,
    }
    axios({
        url: '/api/House/AddHouse',
        method: 'post',
        data: obj
    }).then((res) => {
        if (res.data.data == 1) {
            alert("添加成功");

            router.push("/show");
        }
        else {
            alert("添加失败");
            return;
        }
    })

}

const Images=(e:any)=>{
    console.log(e);
    let  formdate=new FormData();
    let obj=e.target.files[0];
    formdate.append("file",obj);
    axios({
        url:"/api/House/Images",
        method:"post",
        data:formdate
    }).then((res)=>{
       state.value.imgage='https://localhost:7240'+res.data.data;
    }).catch((err) => {
        console.log(err);
    })
}
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                

</script>

<style scoped></style>